<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm"  :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入标题" style="width: 240px"
                  @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"

          @click="handleAdd"
        >添加</el-button>
      </el-col>
      <!--<el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"

          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"

          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"

          @click="handleExport"
        >导出</el-button>
      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-row :gutter="10" class="mb8" v-if="isFlag">
      <div align="center">暂无数据</div>
    </el-row>
    <el-row :gutter="10" class="mb8" style="height:720px;overflow: auto">
      <el-col :span="24">
        <div v-for="(item,index) in FONDSFOLDERList" :data="FONDSFOLDERList" :key="index" style="margin-bottom:20px">
          <el-card class="box-card">

           <div slot="header" class="clearfix">
              <span :style="isSize">{{ item.title }}</span>
              <el-button style="float: right; padding: 3px 0 0 6px" type="text" @click="publish(0,item.id)">取消发布</el-button>
              <el-button style="float: right; padding: 3px 0" type="text" @click="publish(1,item.id)">发布</el-button>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleDelete(item.id)">删除</el-button>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleUpdate(item.id)">修改</el-button>
              <el-button style="float: right; padding: 3px 0" type="text" @click="bjzw(item.id)">编辑正文</el-button>
            </div>
            <div class=" item" v-html="snippet(item.content)" :style="isSize">

            </div>
             <div class=" item2" style="float: right;" :style="isSize">
               发布时间：<el-input id="input1" maxlength="30" style="width: 165px;height: 8px" :title="item.publishTime" v-model="item.publishTime"disabled/>
              机关单位：<el-input id="input2" maxlength="30" style="width: 165px;height: 8px" :title="item.jgdw" v-model="item.jgdw" disabled/>
              文种：<el-input id="input3" maxlength="30" style="width: 165px;height: 8px" :title="item.wz" v-model="item.wz" disabled/>
              年度(月、季度)：<el-input id="input4" maxlength="30" style="width: 165px;height: 8px" :title="item.nd" v-model="item.nd" disabled/>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="108px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" maxlength="30" />
        </el-form-item>
        <el-form-item label="机关单位" prop="jgdw">
          <el-input v-model="form.jgdw" maxlength="30" />
        </el-form-item>
        <el-form-item label="文种" prop="wz">
          <el-input v-model="form.wz" maxlength="30" />
        </el-form-item>
        <el-form-item label="年度(月、季度)" prop="nd">
          <el-input v-model="form.nd" maxlength="30" />
        </el-form-item>
        <!--<el-form-item label="${comment}">
          <editor v-model="form.CONTENT" :min-height="192"/>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="isClicked" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog v-loading="loading2" :title="title3" :visible.sync="open3" width="500px" append-to-body>
      <el-form ref="form" :model="form" label-width="108px">
        <el-form-item label="模板" prop="modelId">
          <el-select v-model="modelId" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="dict in modelOption" :key="dict.value" :label="dict.label"
                       :value="dict.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveModel">确 定</el-button>
        <el-button @click="cancel3">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="open1" width="1200px" append-to-body>

      <div style="padding-bottom: 10px;float: right">
        <el-button type="primary" @click="selectModel">套用模板</el-button>
        <el-button v-once @click="saveAll">保存</el-button>
      </div>
      <div class=" item3" :style="isSize">
        标题：<el-input id="input5" maxlength="30" style="width: 165px;height: 8px" v-model="form.title"/>
        机关单位：<el-input id="input6" maxlength="30" style="width: 165px;height: 8px" v-model="form.jgdw"/>
        文种：<el-input id="input7" maxlength="30" style="width: 165px;height: 8px" v-model="form.wz"/>
        年度(月、季度)：<el-input id="input8" maxlength="30" style="width: 165px;height: 8px" v-model="form.nd"/>
      </div>
      <div>
        <editor v-model="form.content" :min-height="600" :isMaterialList="true" :isMaterialListStyle="'2'"/>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import { saveModel,listFONDSFOLDER, getFONDSFOLDER, delFONDSFOLDER, addFONDSFOLDER, updateFONDSFOLDER } from "@/api/archive/quanzongjuanguanli/fondsfolder";
import { listMODELMANAGE } from "@/api/archive/quanzongjuanguanli/modelmanage";
import estimateTableHeight from "@/mixins/estimateTableHeight";
export default {
  name: "FONDSFOLDER",
  mixins: [estimateTableHeight], // 混入方法
  data() {
    return {
      isClicked: false, // 控制按钮是否被点击的状态
      islock:false,
      showTooltip: false,
      // 遮罩层
      loading: true,
      loading2: false,
      modelId:"",
      isFlag:false,
      //type:1,  //1 大事记 2 组织沿革
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      FONDSFOLDERList: [],
      // 弹出层标题
      title: "",
      title3: "",
      // 是否显示弹出层
      open: false,
      open1: false,
      open3: false,
      modelOption: [

      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: null,
        title: null,
        jgdw: null,
        nd: null,
        wz: null,
        isDel: null,
        deptId: null,
        userId: null,
        publishTime: null,
        isPublish: null,
        content: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        isDel:"0",
        params:{
          isPage:"no"
        }
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {

isSize() {

  if (this.$store.getters.size == 'small') {
    this.size = 'font-size: 12px;'
  } else {
    this.size = 'font-size: 14px;'
  }
  return this.size
}


},
  created() {
    this.menuName = this.$route.meta.title;
    //console.log(this.$route.meta)
    this.queryParams.type = this.menuName.includes("大事记")?1:2;
    this.getList();
  },
  methods: {
    snippet(html){
      if (html!=null && html!='' && html!='null' && html!=undefined){
        let relStyle = /style\s*?=\s*?([‘"])[\s\S]*?\1/g; //去除样式
        let relTag = /<.+?>/g; //去除标签
        let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g;// 清除类名
        let newHtml = "";
        if (html) {
          newHtml = html.replace(relStyle, "");
          newHtml = newHtml.replace(relTag, '');
          newHtml = newHtml.replace(relClass, '');
        }
        //newHtml.slice(0, 100) + "...";
        return newHtml.slice(0, 100) + "...";
      }else{
        return html;
      }
    },
    saveAll(){
      if (this.islock==true){
        return;
      }
      this.islock = true;
      setTimeout(()=>{
        this.islock = false;
      },2000)
      this.form.deptId = null;
      this.form.userId = null;
      this.form.isPublish = null;
      this.form.publishTime = null;
      this.form.type = null;
      this.form.isDel = null;
      this.form.createBy = null;
      this.form.createTime = null;
      this.form.updateBy = null;
      this.form.updateTime = null;
      this.form.content2 = encodeURI(encodeURI(this.form.content));
      this.form.content = null;
      updateFONDSFOLDER(this.form).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.open1 = false;
        this.getList();
      });
    },
    saveModel(){
      if (this.modelId==""){
        this.$modal.msgWarning("请选择模板")
        return false;
      }

      this.$modal.confirm('套用模板将覆盖原有内容，是否确定？').then(function () {
      }).then(() => {
        let start = new Date().getTime();
        console.log('==========前端套用模板开始==========');
        this.loading2 = true;
        saveModel(this.modelId).then(response => {
          console.log('==========套用模板后端已响应==========');
          let m = response.msg;
          if (m=='fileError'){
            this.loading2 = false;
            this.$modal.msgWarning("文件损坏，请更改文件");
            //this.form.content = m;
            //console.log('==========前端套用模板结束==========');
            //let end = new Date().getTime();
            //console.log('==========前端套用模板耗时：：：'+(end-start)+'==========');
            this.open3 = false;
          }else{
            this.loading2 = false;
            this.form.content = m;
            console.log('==========前端套用模板结束==========');
            let end = new Date().getTime();
            console.log('==========前端套用模板耗时：：：'+(end-start)+'==========');
            this.open3 = false;
          }
        });
      }).catch(() => {
      });
    },
    selectModel(){
      this.title3 = "选择模板";
      this.open3 = true;
      this.modelOption = [];
      listMODELMANAGE(this.queryParams).then(response => {
        let data = response.rows;
        for (var i=0;i<data.length;i++){
          let d = data[i];
          this.modelOption.push({value:d.id,label:d.fileName});
        }
        /*this.modelOption = response.rows;
        console.log(this.modelOption,"1111")*/
      });
    },
    bjzw(id){
      this.open1 = true;
      this.title = "";
      this.reset();
      const ID = id
      getFONDSFOLDER(ID).then(response => {
        this.form = response.data;
      });
    },
    cancel2(){
      this.open1 = false;
    },
    cancel3(){
      this.open3 = false;
    },
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listFONDSFOLDER(this.queryParams).then(response => {
        this.FONDSFOLDERList = response.rows;
         if (this.FONDSFOLDERList.length==0){
           this.isFlag = true;
         }else{
           this.isFlag = false;
         }
        //this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        type: null,
        title: null,
        jgdw: null,
        nd: null,
        wz: null,
        isDel: null,
        deptId: null,
        userId: null,
        publishTime: null,
        isPublish: null,
        content: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ID)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    /** 修改按钮操作 */
    handleUpdate(id) {
      this.reset();
      const ID = id
      getFONDSFOLDER(ID).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改";
      });
    },
    /** 提交按钮 */
    submitForm() {
      if (this.isClicked) return; // 如果已经点击过，直接返回，不执行后续操作

      this.isClicked = true; // 设置按钮为点击状态
      setTimeout(() => {
        // 异步操作完成后，重置按钮状态
        this.isClicked = false;
      }, 2000);
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.form.content = null;
            this.form.isPublish = null;
            console.log(this.form,'update');
            updateFONDSFOLDER(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              //this.isClicked = false;
              this.open = false;
              this.getList();
            });
          } else {
            this.form.type = this.queryParams.type;
            console.log(this.form,'add');
            addFONDSFOLDER(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              //this.isClicked = false;
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    publish(status,id){
      const form1 = {};
      form1.isPublish = status;
      form1.id = id;
      let msg = "";
      if (status==1) msg = "发布";
      if (status==0) msg = "取消发布";
      this.$modal.confirm('是否确认'+msg+'？').then(function() {
        return updateFONDSFOLDER(form1);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(msg+"成功");
      }).catch(() => {});
    },
    /** 删除按钮操作 */
    handleDelete(id) {
      const IDs = id;
      this.$modal.confirm('是否确认删除？').then(function() {
        return delFONDSFOLDER(IDs);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('manage/FONDSFOLDER/export', {
        ...this.queryParams
      }, `FONDSFOLDER_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
  .el-card__body{
    padding: 15px 20px 8px 20px !important;
  }
  .text {
    font-size: 14px;
  }
  #input1{
    height: 27px !important;
  }
  #input2{
    height: 27px !important;
  }
  #input3{
    height: 27px !important;
  }
  #input4{
    height: 27px !important;
  }
  .item {
    margin-bottom: 18px;
  }
  .item2 {
    margin-bottom: 19px;
  }
  .item3 {
    margin-bottom: 16px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>
